<style>
    .btnhide{
        margin-left: 5px;float:right;display: none;
    }
    .ui-icon{
        cursor: pointer;
    }
    .sel-img{
                            width: 100%;
        margin-bottom: 5px;
        cursor: pointer;
        border:solid 1px #ccc;
    }
    .border{
        border:solid 1px black;
    }
</style>

<div class="row">
    <div class="col-md-3">
        <div class="panel panel-default" style="min-height:600px">
            <div class="panel-heading">
                <?php if (!empty($cur_user["isSuperAdmin"])) : ?>
                    <span style="float: right;cursor: pointer" class="glyphicon glyphicon-plus btn-add-top" aria-hidden="true"></span>
                <?php endif; ?>
                <h3 class="panel-title">栏目列表</h3>
            </div>
            <div class="list-group">
                <?php foreach ($root_menu_list as $root_menu) { ?>
                    <?php if (isset($children_menu_list[$root_menu["objectId"]])) : ?>
                        <a data-id="<?=$root_menu["objectId"]?>" class="list-group-item <?= (isset($this->params['left_menu_active_id'])&&$this->params['left_menu_active_id'] == $root_menu["objectId"]) ? 'active' : '' ?>" href="/admin/menu-edit?menu_id=<?= $root_menu["objectId"] ?>">
                            <span class="btnhide btn-del" aria-hidden="true">删除</span>
                            <span class="btnhide btn-add" aria-hidden="true">新增分类</span>
                            <span class="ui-icon ui-icon-triangle-1-se"></span><?= $root_menu["menu_name"] ?>
                        </a>
                    <?php else: ?> 
                        <a data-id="<?=$root_menu["objectId"]?>" class="list-group-item <?= (isset($this->params['left_menu_active_id'])&&$this->params['left_menu_active_id'] == $root_menu["objectId"]) ? 'active' : '' ?>" href="/admin/menu-edit?menu_id=<?=$root_menu["objectId"] ?>">
                            <span class="btnhide btn-del" aria-hidden="true">删除</span>
                            <span class="btnhide btn-add" aria-hidden="true">新增分类</span>
                            <span style="padding-left: 20px"><?= $root_menu["menu_name"] ?></span></a>
                    <?php endif; ?>
                    <?php if (isset($children_menu_list[$root_menu["objectId"]])) : ?>
                        <?php foreach ($children_menu_list[$root_menu["objectId"]] as $child_menu) { ?>
                            <a data-id="<?=$child_menu["objectId"]?>" class="list-group-item <?= (isset($this->params['left_menu_active_id'])&&$this->params['left_menu_active_id'] == $child_menu["objectId"]) ? 'active' : '' ?>" href="/admin/menu-edit?menu_id=<?= $child_menu["objectId"] ?>">
                                <span class="btnhide btn-del" aria-hidden="true">删除</span>
                                <span style="padding-left: 40px"><?= $child_menu["menu_name"] ?></span>
                            </a>
                        <?php } ?>
                    <?php endif; ?>
                <?php } ?>
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <div class="panel panel-default" style="min-height:600px">
            <div class="panel-heading">
                <h3 class="panel-title">栏目列表</h3>
            </div>
            <div class="panel-body">
                <form>
                    <input type="hidden" id="txt_parent_id" value="<?=$cur_menu["parent_id"]?>"/>
                    <input type="hidden" id="txt_objectId" value="<?=$cur_menu["objectId"]?>"/>
                    <div class="form-group">
                        <label for="txt_menu_name">栏目名称</label>
                        <input type="text" class="form-control" id="txt_menu_name" value="<?=$cur_menu["menu_name"]?>">
                    </div>
                    <div class="form-group">
                        <label for="txt_menu_sort">栏目顺序</label>
                        <input type="text" class="form-control" id="txt_menu_sort" value="<?=$cur_menu["menu_sort"]?>"">
                    </div>
                    <?php if (empty($cur_menu["parent_id"])) : ?>
                        <div class="form-group">
                            <label>内容展示方式</label>
                            <div>
                                <label class="radio-inline">
                                    <input type="radio" name="sel_menu_type" value="0" <?= empty($cur_menu["menu_type"]) ? "checked" : "" ?>> 列表模式(突出内容)
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="sel_menu_type" value="1" <?= $cur_menu["menu_type"] == 1 ? "checked" : "" ?>> 列表模式(突出图片)
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="sel_menu_type" value="2" <?= $cur_menu["menu_type"] == 2 ? "checked" : "" ?>>只展示最新文章的内容
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Banner图片(<a href="javascript:" class="uploadimage">上传图片</a>或<a href="javascript:" class="btn-select-img">从图库选择</a> <a href="javascript:" class="clearimage">清空图片</a>)</label>
                            <?= _include('@views/admin/upload-image.php', ['img_style' => "min-height: 100px;width: 100%;",'imgplace_style' => "min-height: 190px;width: 100%;","img_url"=>empty($cur_menu['banner_url'])?"":$cur_menu['banner_url']]); ?>
                             <span id="helpBlock2" class="help-block">最佳尺寸为1200*300，只支持JPG、PNG、GIF，大小不超过500K</span>
                        </div>
                    <?php endif; ?>
                    <button class="btn btn-primary btn-save" type="button">保存</button>
                </form>
            </div>
        </div>    
    </div>    
</div>

<div id="dialog-form"  title="新增分类" style="display: none">
    <form>
        <input type="hidden" id="txt_add_parent_id"/>
        <div class="form-group">
            <label for="txt_add_menu_name">栏目名称</label>
            <input type="text" class="form-control" id="txt_add_menu_name">
        </div>
        <div class="form-group">
            <label for="txt_add_menu_sort">栏目顺序</label>
            <input type="text" class="form-control" id="txt_add_menu_sort">
        </div>
        <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </form>
</div>

<div id="dialog-confirm" title="提示" style="display: none">
    <p>确实要删除当前记录吗？</p>
</div>

<div id="dialog-img" title="选择图片" style="display: none">
    <div style="height: 400px">
        <?php for ($i=1;$i<10;$i++) { ?>
            <img class="sel-img" src="/images/banner/banner<?=$i?>.jpg">
        <?php } ?>
    </div>
</div>
<script>
    $(function () {
        var dialog_form;

        $(".list-group a").on("mouseover",function(){
            $(this).find(".btnhide").show();
        }).on("mouseout",function(){
            $(this).find(".btnhide").hide();
        });

        $(".sel-img").on("click",function(){
            $(".sel-img").removeClass("border");
            $(this).addClass("border");
        });

        function updateData(){
            var menu_name=$.trim($("#txt_menu_name").val());
            if(menu_name==""){
                toastr.error("栏目名称不能为空");
                $("#txt_menu_name").focus();
                return;
            }

            var menu_sort=$.trim($("#txt_menu_sort").val());
            if(menu_sort==""){
                toastr.error("栏目顺序不能为空");
                $("#txt_menu_sort").focus();
                return;
            }
            if(isNaN(menu_sort)){
                toastr.error("栏目顺序必须为数字");
                $("#txt_menu_sort").focus();
                return;
            }

            var parent_id=$("#txt_parent_id").val();
            var img_url=$.trim($("#img-url").attr("src"));
            if(!parent_id&&img_url==""){
                //toastr.error("Banner图片不能为空");
                //return;
            }

            var menu_type=$('input:radio[name="sel_menu_type"]:checked').val();
            if(!parent_id&&menu_type==""){
                toastr.error("栏目类型不能为空");
                return;
            }

            var data={
                "objectId":$("#txt_objectId").val(),
                "menu_name":menu_name,
                "menu_sort":parseInt(menu_sort),
                "parent_id":parent_id,
                "menu_type":parseInt(menu_type),
                "banner_url":img_url
            };
            $.ajax({
                type: "post",
                url: "/admin/save-menu",
                data: "data=" + MyJson.toString(data),
                success: function (data) {
                    if (data.success) {
                        toastr.success("保存成功");
                        window.location.href=window.location.href;
                    }
                    else{
                        toastr.error(data.message);
                    }
                }
            });
        }

        function addData(){
            var menu_name=$.trim($("#txt_add_menu_name").val());
            if(menu_name==""){
                toastr.error("栏目名称不能为空");
                $("#txt_add_menu_name").focus();
                return;
            }

            var menu_sort=$.trim($("#txt_add_menu_sort").val());
            if(menu_sort==""){
                toastr.error("栏目顺序不能为空");
                $("#txt_add_menu_sort").focus();
                return;
            }
            if(isNaN(menu_sort)){
                toastr.error("栏目顺序必须为数字");
                $("#txt_add_menu_sort").focus();
                return;
            }

            var parent_id=$("#txt_add_parent_id").val();

            var data={
                "menu_name":menu_name,
                "menu_sort":parseInt(menu_sort),
                "parent_id":parent_id
            }
            $.ajax({
                type: "post",
                url: "/admin/save-menu",
                data: "data=" + MyJson.toString(data),
                success: function (data) {
                    if (data.success) {
                        toastr.success("保存成功");
                        window.location.href=window.location.href;
                    }
                    else{
                        toastr.error(data.message);
                    }
                }
            });
        }

        function delMenu(menu_id){
            $( "#dialog-confirm" ).dialog({
                resizable: false,
                height: "auto",
                width: 400,
                modal: true,
                buttons: {
                    "确认": function() {
                        $( this ).dialog( "close" );
                        $.ajax({
                            type: "post",
                            url: "/admin/delete-menu",
                            data: "menu_id="+menu_id,
                            success: function(data){
                                if (data.success) {
                                    toastr.success('删除成功');
                                    window.location.href = "/admin/menu-edit";
                                }
                                else{
                                    toastr.error(data.message);
                                }
                            },
                            error:function(){
                                toastr.error('删除失败');
                                window.location.href="/admin/menu-edit";
                            }
                        });
                    },
                    取消: function() {
                        $( this ).dialog( "close" );
                        $("#txt_menu_name").focus();
                    }
                }
            });
        }

        dialog_form = $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 300,
            width: 400,
            modal: true,
            buttons: {
                "保存": addData,
                "取消": function() {
                    dialog_form.dialog( "close" );
                    $("#txt_menu_name").focus();
                }
            },
            close: function() {
                $("#txt_add_parent_id").val("");
                $("#txt_add_menu_name").val("");
                $("#txt_add_menu_sort").val("");
            }
        });

        $("body").on('click', ".btn-save", function (e) {
            updateData();
        });

        $(".btn-add").on("click",function(event){
            event.preventDefault();
            var parent_id=$(this).closest("a").attr("data-id");
            $("#txt_add_parent_id").val(parent_id);
            dialog_form.dialog( "open" );
        });

        $(".btn-add-top").on("click",function(event){
            event.preventDefault();
            $("#txt_add_parent_id").val("");
            dialog_form.dialog( "option", "title", "新增一级栏目" ).dialog( "open" );
        });

        $(".btn-select-img").on("click",function(event){
            $( "#dialog-img" ).dialog({
                resizable: false,
                height: "auto",
                width: 400,
                modal: true,
                buttons: {
                    "确认": function() {
                        $( this ).dialog( "close" );
                        var src=$(".border").attr("src");
                        if(src){
                            $("#img-url").attr("src",src).show();
                            $("#img-place").hide();
                        }
                    },
                    取消: function() {
                        $( this ).dialog( "close" );
                        $("#txt_menu_name").focus();
                    }
                }
            });
        });

        $(".btn-del").on("click",function(){
            event.preventDefault();
            var menu_id=$(this).closest("a").attr("data-id");
            $.ajax({
                type: "post",
                url: "/admin/check-delete",
                data: "menu_id=" + menu_id,
                success: function (data) {
                    if (data.success) {
                        delMenu(menu_id);
                    }
                    else {
                        toastr.error(data.message);
                    }
                }
            });
        });
    })
</script>